<template>
  <div class="w-[1150px] p-12 print-style relative bg-white">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ getSystemConfig('HISNAME') }}</div>
      <BaseBarcode :value="tableData[0]?.rkdh" class="w-60 text-right pr-2 mt-5" />
    </div>
    <div class="text-center text-[22px] font-bold">{{ tableData[0]?.status }}</div>

    <div class="flex justify-between item-center mt-5">
      <div>
        <div class="mb-3">供应商：{{ tableData[0]?.gysmc }}</div>
        <div>票据号：{{ tableData[0]?.fph }}</div>
      </div>
      <div>
        <div class="mb-3">验收人：{{ tableData[0]?.ysr }}</div>
        <div>确认人：{{ tableData[0]?.qrr }}</div>
      </div>
      <div>
        <div class="mb-3">入库日期：{{ tableData[0]?.rksj }}</div>
        <div>入库仓库：{{ tableData[0]?.ckmc }}</div>
      </div>
    </div>

    <div class="flex-1 mt-4">
      <div class="flex justify-between border border-solid items-center border-x-0 py-3">
        <div class="flex-1">药品名称</div>
        <div class="flex-1">规格</div>
        <div class="flex-1">数量</div>
        <div class="flex-1">批号</div>
        <div class="flex-1">有效期</div>
        <div class="flex-1">采购单价</div>
        <div class="flex-1">采购金额</div>
        <div class="flex-1">零售价</div>
        <div class="flex-1">厂家</div>
        <div class="flex-1">产地</div>
      </div>
      <div
        v-for="(item, index) in tableData"
        :key="item"
        class="flex justify-between border border-dashed border-t-0 items-center border-x-0 py-2"
        :class="{ 'border-0 mt-2.5': tableData.length <= 1 || index + 1 === tableData.length }"
      >
        <div class="item-class">{{ item.ypmc }}</div>
        <div class="item-class">{{ item.gg }}</div>
        <div class="item-class">{{ item.sl }}</div>
        <div class="item-class">{{ item.ph }}</div>
        <div class="item-class">{{ item.yxq }}</div>
        <div class="item-class">{{ item.cgdj }}</div>
        <div class="item-class">{{ item.cgje }}</div>
        <div class="item-class">{{ item.lsj }}</div>
        <div class="item-class">{{ item.cj }}</div>
        <div class="item-class">{{ item.cd }}</div>
      </div>
    </div>
    <div class="pt-5 mt-4 border border-solid border-x-0 border-b-0">
      <div class="flex items-center">
        <div style="margin-right: 157px">合计：</div>
        <div style="margin-right: 415px">{{ tableData[0]?.zsl }}</div>
        <div>{{ tableData[0]?.zje }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'
import { getSystemConfig } from '@/utils/systemConfig'

const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})

const tableData = ref([])

watch(
  () => props.params,
  () => {
    if (props.params?.printData?.detail?.length > 0) {
      tableData.value = props.params?.printData?.detail
    }
  }
)
</script>
<style lang="less" scoped>
.item-class {
  width: 10%;
}
</style>
